<template>
  <div>
     <div class="divBar" />
        <h5 class="titleInfo">特色服务</h5>
        <el-form
          ref="form3"
          class="form"
          :rules="rules3"
          :model="form3"
          label-width="180px"
        >
          <el-row>
            <el-col :span="13">
              <el-form-item label="环境设施（最多选3种）" prop="envir">
                <el-checkbox-group v-model="form3.envir" :min="1" :max="3">
                  <el-checkbox
                    v-for=" city in cities"
                    :key="city.id"
                    :label="city.id"
                  >{{ city.name }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

            <el-col :span="13">
              <el-form-item label="特色服务（最多选3种）" prop="char">
                <el-checkbox-group v-model="form3.char" :min="1" :max="3">
                  <el-checkbox
                    v-for=" server in servers"
                    :key="server.id"
                    :label="server.id"
                  >{{ server.name }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

            <el-col :span="13">
              <el-form-item label="个性服务（最多选3种）" prop="per">
                <el-checkbox-group v-model="form3.per" :min="1" :max="3">
                  <el-checkbox
                    v-for=" personaly in personalies"
                    :key="personaly.id"
                    :label="personaly.id"
                  >{{ personaly.name }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button
              style="margin:30px 0"
              type="primary"
              @click="submitChar('form3')"
            >保存</el-button>
          </el-form-item>
        </el-form>
  </div>
</template>
<script>
import { charSer, getCharSer,shopService, } from '@/api/shopMessage'

export default {
  data() {
    return {
      form3: {
        envir: [],
        char: [],
        per: []
      },
      cities: [], // 特色服务选项
      servers: [],
      personalies: [],
      rules3: {
        envir: [{ required: true, message: '请选择环境设施' }],
        char: [{ required: true, message: '请选择特色服务' }],
        per: [{ required: true, message: '请选择个性分类' }]
      },
    }
  },
  created() {
    this.getChar()

  },
  mounted() {
    this.shopService()
    
  },
  methods: {
      // 提交特色服务
    submitChar(e) {
      this.$refs[e].validate(valid => {
        if (valid) {
          const arry = [
            ...this.form3.envir,
            ...this.form3.char,
            ...this.form3.per
          ]
          charSer({ serviceData: arry}).then(res => {
            if (res.data.code == 200) {
              this.shopService()
              
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
            }
          })
        } else {
          this.$message({
            message: '有必填项没填，不能提交咯',
            type: 'warning'
          })
          return false
        }
      })
    },
    // 获取特色服务
    getChar() {
      getCharSer().then(res => {
        if(res.data ){
          this.cities =res.data.filter(item=>item.type==1)
          this.servers =res.data.filter(item=>item.type==2)
          this.personalies =res.data.filter(item=>item.type==3)
        }else{
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        }
      })
    },
     //获取特色服务
    shopService(){
      shopService().then(res=>{
        if(res.data.code==200 && res.data.data){
        
            const arr = []
            const arr1 = []
            const arr2 = []
             this.form3.envir = res.data.data.filter(item=>item.type==1).map(item=>item.id)
             this.form3.char = res.data.data.filter(item=>item.type==2).map(item=>item.id)
             this.form3.per = res.data.data.filter(item=>item.type==3).map(item=>item.id)
        }
      }).catch(err=>{
            this.errorStatus(err.message);
      })
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, 'error')
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      })
    },
  },
}
</script>
<style scoped>
 .el-checkbox {
    margin-left: 30px;
    width: 150px;
}
  
</style>